<template>
    <div id='usercenter'>
        <!-- 用户名 -->
        <el-form ref="form" :data="form" label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="上传头像" prop="image">
            <el-upload class="avatar-uploader" ref="upload" list-type="picture-card" action="https://jsonplaceholder.typicode.com/posts/"  :data="{fileType: form.class}" :file-list="[{url: form.image}]" :on-success="handleUploadSuccess"  :on-remove="handleRemove" :before-upload="beforeAvatarUpload">            
             <i class="el-icon-plus"></i>
            </el-upload>
         </el-form-item>
        <!-- 上传图片 -->
        <!-- 手机 -->
        <el-form-item label="手机" prop="phone">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button >取消</el-button>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item >
        </el-form>
    </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        email:'',
        phone:'',
        class: "category",
        categoryName: "",
        introduction: "",
        sortShow: 0,
        image: "",
        id: ""
      }
    };
  },
  created(){
      this.getUsersList();
  },
  methods: {
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleUploadSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    //上传图片结束
     //数据回填
    getUsersList() {
      this.$http
        .get("/users/one")
        .then(result => {
          this.form = result.data.data;
        });
    },
     //编辑保存
    onSubmit(obj){
      this.$http
        .post("/users/edit", this.$qs.stringify(this.form))
        .then(result => {
          this.getUsersList();
        })
    },   
  }
};
</script>

<style>
</style>
